<script setup lang="ts">
import { computed, ref, getCurrentInstance } from "vue";
import { setCookie } from "@/utils/cookie";
import type Typings from "@/typings";

const curIns = getCurrentInstance()?.proxy;

const form = ref();

const formData = ref({
  account: "",
  password: "",
});

const formJson = computed<Typings.XtPublic.Plugin.XtDynamicForm.JsonType[]>(
  () => {
    return [
      {
        el: "input",
        span: 24,
        prop: "account",
        placeholder: "请输入账号",
        rules: [{ required: true, message: "不能为空", trigger: "blur" }],
      },

      {
        el: "input",
        span: 24,
        prop: "password",
        placeholder: "请输入密码",
        type: "password",
        rules: [{ required: true, message: "不能为空", trigger: "blur" }],
      },
    ];
  }
);

const onSubmit = async () => {
  await form.value.instance.validate();

  // 前端 Mock cookie
  setCookie("token", "token");

  curIns?.$router.replace({
    path: "/dashboard",
  });
};
</script>

<template>
  <div class="w-screen h-screen bg-[#181818] relative">
    <div
      class="form-container w-[600px] h-[200px] absolute left-1/2 -translate-1/2 top-[40vh]"
    >
      <h3 class="text-white text-[30px] text-center font-bold mb-[12px]">
        登录系统
      </h3>

      <xt-dynamic-form
        ref="form"
        :label-width="0"
        :data="formData"
        :formJson="formJson"
        size="large"
      ></xt-dynamic-form>

      <xt-button class="w-full" size="large" @click="onSubmit">登 录</xt-button>
    </div>
  </div>
</template>
